// 获取Li的父级元素对象
var ul1 = document.getElementsByClassName("left")[0];
var lis = ul1.getElementsByTagName("li");
var kfname = document.getElementsByTagName("b")[0];
var boxs = document.getElementsByClassName("c_box");
// 首先就来一手循环
// 循环绑定我们的li
for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
        for (var i = 0; i < lis.length; i++) {
            lis[i].className = "";
            boxs[i].className = "c_box";
        }
        this.className = "active";
        kfname.innerHTML = this.firstElementChild.innerHTML;
        // 获取到自定义属性，实现下面内容的切换
        var index = parseInt(this.getAttribute("xh"));
        boxs[index].className = "c_box active1"
    }
}

// 首先设置蒙层是否出现
var mc = document.getElementsByClassName("mc")[0];
banner.onmouseover = function () {
    mc.className = "mc active";
    clearInterval(timer);
}
banner.onmouseout = function () {
    timer=setInterval(function(){
        banner_2(1);
    },1500);
    mc.className = "mc";
}

var count = 0;
// 设置右按钮的事件
var btns = banner.getElementsByTagName("button");
var bmgs = banner.getElementsByTagName("img");
var blis = banner.getElementsByTagName("li");
for (var i in btns) {
    btns[i].onclick = function () {
        if (this.innerText == ">") {


            banner_2(1);
        } else {


            banner_2(-1);
        }
    }
}
for (var i = 0; i < blis.length; i++) {
    blis[i].onclick = function () {
        banner_2(0,this);
    }
}


function banner_2(x, obj) {

    if (x) {
        count+=x;
        if (count > 3) {
            count = 0;
        } else if (count < 0) {
            count = 3;
        }
    }else{
        // 下面是选项卡的时候，不需要传入数字让count进行变化
        for (var i in blis) {
            // 当点击时候，将其他的li设置为className为空
            blis[i].className = "";
            // 将imgs也设置为className为""
            bmgs[i].className = "";
        }
        // 将当前这个元素的obj设置为active
        obj.className = "active";
        // 通过这个对象获取到对应的自定义属性
        count = eval(obj.getAttribute("xh"));
        // 再利用获取到的下标将对应的img显示出来
        bmgs[count].className = "active";
    }

    for (var i = 0; i < blis.length; i++) {
        bmgs[i].className = "";
        blis[i].className = "";
    }
    bmgs[count].className = "active";
    blis[count].className = "active";
}

timer= setInterval(
    function(){
        banner_2(1);
    },1500
);

